データラベルは、チャート内のデータポイントに関連付けられたラベルです。グラフにデータラベルを使用すると、特定のポイントが属する系列や特定のポイントの正確な値がわかりやすくなるため、便利な場合があります。

C1Chart はデータラベルをサポートします。各データ系列には PointLabelTemplate プロパティがあります。このプロパティは、各ポイントの隣に表示されるビジュアル要素を示します。通常、PointLabelTemplate は XAML リソースとして定義され、XAML またはコードからグラフに割り当てることができます。

DataTemplate を追加すると、データをどのように表示するかという視覚属性と、表示されたデータにデータ連結からどのようにアクセスするかという両方を決めることができます。

PointLabelTemplate を XAML リソースとして定義するには、リソースディクショナリを作成し、そのリソースディクショナリに DataTemplate リソースを追加します。これにより、Window.xaml ファイルから、DataTemplate リソースにアクセスできます。

新しいリソースディクショナリを追加するには、次の手順に従います。

1. ソリューションエクスプローラで、プロジェクトを右クリックし、［追加］をポイントして、［リソースディクショナリ］を選択します。［新しい項目の追加］ダイアログボックスが表示されます。
2. ［名前］テキストボックスに、辞書の名前 Resources.xaml を入力し、［追加］ボタンをクリックします。 Resources.xaml がプロジェクトに追加され、コードエディタで開かれます。

ラベルを作成するには、ラベルテンプレートを作成し、そのテンプレートに PointLabelTemplate を割り当てる必要があります。

各データポイントのプロットのレンダリング時に、指定したテンプレートに基づいてラベルが作成されます。ラベルの DataContext プロパティは、ポイントに関する情報を提供する現在の DataPoint インスタンスに設定します。データ連結を使用している場合は、より簡単にこの情報をラベルに表示できます。

次は、ポイントの値を表示するラベルテンプレートのサンプルです。

<DataTemplate x:Key="lbl">
   <TextBlock Text="{Binding Path=Value}" />
</DataTemplate>

リソースを定義したら、そのリソースをプロパティ値として参照できます。それには、キー名を示すリソースマークアップ拡張構文を使用します。

テンプレートをデータ系列に割り当てるには、次のように PointLabelTemplate プロパティを設定します。

<c1chart:DataSeries PointLabelTemplate="{StaticResource lbl}" />

これは標準のデータテンプレートなので、複雑なラベルを作成できます。たとえば、次のサンプルテンプレートは、データポイントの XY 座標を表示する XY グラフのデータラベルを定義します。

このテンプレートでは、２行２列の標準グリッドをコンテナとして使用します。ポイントの x 値は、DataPoint クラスのインデクサを使用して取得されます。インデクサを使用して、複数のデータセットをサポートする XYDataSeries クラスなどのデータ系列クラスの値を取得できます。

<DataTemplate x:Key="lbl">
   <!-- Grid 2x2 with black border  -->
   <Border BorderBrush="Black">
          <Grid>
                 <Grid.ColumnDefinitions>
                       <ColumnDefinition />
                       <ColumnDefinition />
                 </Grid.ColumnDefinitions>
                 <Grid.RowDefinitions>
                       <RowDefinition />
                       <RowDefinition />
                 </Grid.RowDefinitions>
                 <!-- x-coordinate -->
                 <TextBlock Text="X=" />
                 <TextBlock Grid.Column="1" Text="{Binding Path=[XValues]}" />
                 <!-- y-coordinate -->
                 <TextBlock Grid.Row="1" Text="Y=" />
                 <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Value}" />
          </Grid>
   </Border>
</DataTemplate>

数値データを表示する場合は、出力値を書式設定することがよくあります。静的クラス Format を使用して、XAML コード内で標準の .Net 書式文字列を指定できます。たとえば、次のサンプルコードは、パーセント値を書式設定するためにコンバータを使用しています。

<DataTemplate x:Key="lbl1">
   <TextBlock Text="{Binding Path=PercentageSeries,
          Converter={x:Static c1chart:Converters.Format},
          ConverterParameter=#.#%}"/>
</DataTemplate>